<!-- 页面上拉加载示例 -->
<script setup lang="ts">
import { ref, onMounted, watch, inject } from 'vue'
import { isWeixinBrowser } from '@/utils'
import { useBaseHooks } from '@/utils/hooks/baseHooks'
import { useScrollEvent } from '@/utils/hooks/scrollEvent'
import { validatorPhone } from '@/utils/validateRule'
// import { listGuide, addGuideLog } from '@/api/tomb'

const $toast: any = inject('$toast', () => {})
// const { formatImgUrl } = useBaseHooks()
const { docBottomSide, dpr } = useScrollEvent()
const submit_form = ref<any>()
const active = ref<number>(0)
const guideObj = ref({
  list: [] as Array<any>,
  total: null,
  page: 1,
  limit: 20,
  lastPage: 1
})
const listLoading = ref<boolean>(false)
const show = ref<boolean>(false)
const form = ref({
  gid: null,
  staffName: '',
  name: '',
  phone: '',
  notes: ''
})

const selectStaff = (row: any) => {
  show.value = true
  form.value.gid = row.id
  form.value.staffName = row.name
}

const fetchGuideList = async () => {
  // const { page, limit, list } = guideObj.value
  // listLoading.value = true
  // await listGuide({ page, limit }).then((res) => {
  //   const { last_page, total, data } = res.data
  //   guideObj.value  = {
  //     ...guideObj.value,
  //     lastPage: last_page,
  //     total,
  //     list: [...list, ...data]
  //   }
  // }).finally(() => { listLoading.value = false })
}

// const handleClose = async (action) => {
//   if (action === 'cancel') {
//     return true
//   }
//   let flag = false
//   await submit_form.value.validate().then(async () => {
//     await addGuideLog(form.value).then(() => {
//       $toast('预约成功')
//       flag = true
//       form.value = {
//         gid: null,
//         staffName: '',
//         name: '',
//         phone: '',
//         notes: ''
//       }
//     }).catch(() => {
//       $toast('预约失败')
//     })
//   }).catch(() => {
//   })
//   return flag
// }

watch(docBottomSide, (val, oldVal) => {
  if (listLoading.value) {
    return
  }
  let { page, lastPage } = guideObj.value
  // 不是最后一页 处于可见状态 请求列表
  if (oldVal >= val && docBottomSide.value / dpr.value <= 400 && page < lastPage && active.value === 0) {
    guideObj.value  = {
      ...guideObj.value,
      page: page + 1
    }
    fetchGuideList()
  }
})

watch(active, (val) => {
  if (val === 0) {
    guideObj.value = {
      list: [] as Array<any>,
      total: null,
      page: 1,
      limit: 20,
      lastPage: 1
    }
    fetchGuideList()
  }
})

onMounted(() => {
  fetchGuideList()
})
</script>
<template>
  <div :class="`staff-list full-heigth${isWeixinBrowser() ? '-vx' : ''}`">
    <van-tabs v-model:active="active">
      <van-tab title="直播导购" />
      <van-tab title="景观动态" />
    </van-tabs>
    <div class="content-list" v-if="active === 0">
      <div v-for="item in guideObj.list" :key="item.id" class="img-item" @click="selectStaff(item)">
        <img :src="formatImgUrl(item.img)" alt="">
        <div class="content">
          <div class="title">{{ item.name }}</div>
          <div>{{ item.describe }}</div>
        </div>
      </div>
    </div>
    <div v-else></div>
    <van-dialog v-model:show="show" title="预约直播导购" confirm-button-text="确认预约" show-cancel-button :before-close="handleClose">
      <van-form ref="submit_form">
        <van-cell-group>
          <van-cell title="导购员" :value="form.staffName" />
          <van-field
            name="name"
            v-model="form.name"
            label="姓名"
            placeholder="填写姓名"
            input-align="right"
            :rules="[{ required: true, message: '请输入用户姓名' }]"
          />
          <van-field
            name="phone"
            v-model="form.phone"
            label="预约手机号"
            type="tel"
            placeholder="输入手机号"
            input-align="right"
            :rules="[
              { required: true, message: '请输入手机号' },
              { validator: validatorPhone, message: '手机号格式错误' }
            ]"
          />
          <van-field
            rows="2"
            autosize
            name="notes"
            v-model="form.notes"
            label="备注"
            type="textarea"
            maxlength="50"
            placeholder="请输入备注"
            label-align="top"
            show-word-limit
          />
        </van-cell-group>
      </van-form>
    </van-dialog>
  </div>
</template>
<style lang="scss" scoped>
.full-heigth {
  min-height: calc(100vh - 92px);
}
.full-heigth-vx {
  min-height: calc(100vh);
}
.staff-list {
  background: linear-gradient(#DEF0F9 20%, #fff, #FFF) no-repeat 100%;
  .content-list {
    display: flex;
    flex-wrap: wrap;
    .img-item {
      width: 50%;
      padding: 5px 15px;
      box-sizing: border-box;
      position: relative;
      img {
        // width:height=5:7
        height: 483px;
        width: 100%;
        background: #fff;
        border-radius: 15px;
      }
      .content {
        position: absolute;
        bottom: 25px;
        right: 27px;
        padding: 0 25px 0 40px;
        text-align: center;
        font-weight: 500;
        color: #fff;
        background: linear-gradient(to left, rgba(11, 154, 249, 0.774) 10%, rgba(11, 154, 249, 0.774), rgba(11, 154, 249, 0));
        .title {
          font-size: 34px;
          border-bottom: 1px solid;
        }
      }
    }
  }
}
</style>